<template>
  <div class="container">
    <div class="top">
      <dl
        class="prod-items"
        v-for="(item, index) in lastedProdPagelist.records"
        :key="index"
        @click="ToProd(item.prodId)"
      >
        <dt class="hot-imagecont">
          <img :src="item.pic" alt="" class="hotsaleimg" />
        </dt>
        <dd class="hot-text">
          <div class="hotprod-text">{{ item.prodName }}</div>
          <div class="prod-text-info">
            <div class="price">
              <span class="symbol">￥</span>
              <span class="big-num">{{
                item.price.toString().split(".")[0]
              }}</span>
              <span class="small-num">{{
                item.price.toString().split(".")[1]
                  ? "." + item.price.toString().split(".")[1]
                  : ".00"
              }}</span>
            </div>
          </div>
        </dd>
      </dl>
    </div>
    <div class="empty-list">暂无商品</div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      count:1,
      path:'',
    };
  },
  computed: {
    ...mapState({
      lastedProdPagelist: (state) => state.home.lastedProdPagelist,
    }),
  },
  methods: {
    ...mapActions({
      homeNavList: "home/homeNavList",
      homeMoreBodyList: "home/homeMoreBodyList",
    }),
    ToProd(id) {
      // console.log(id);
      wx.navigateTo({
        url: `/pages/prod/prod?detailsId=${id}`
      })
    }
  },
  onLoad(option) {
    if (option.path) {
      this.path = option.path
      console.log(option.path,this.count,'this.count...');
      this.homeNavList({path:option.path,count:this.count});
    }else{
      this.homeMoreBodyList();
    }
  },
  onReachBottom() {
    if(this.lastedProdPagelist.total>this.lastedProdPagelist.records.length){
      this.count++
      this.homeNavList({path:this.path,count:this.count});
    }
  },
};
</script>

<style scoped>
.container {
  height: 100%;
  box-sizing: border-box;
  color: #333;
  font-family: helvetica, "Heiti SC", PingFangSC-Light;
}
.empty-list {
  font-size: 24rpx;
  color: #999;
  text-align: center;
  margin: 100rpx 0;
}
.prod-items {
  padding: 20rpx 10rpx 10rpx 20rpx;
}
.prod-items {
  width: 375rpx;
  float: left;
  background: #fff;
  padding-bottom: 20rpx;
  box-sizing: border-box;
}
.prod-items .hot-imagecont {
  border-radius: 8rpx;
  text-align: center;
  font-size: 0;
}
.hot-imagecont .hotsaleimg {
  width: 345rpx;
  height: 345rpx;
}
.prod-items .hot-text {
  margin-top: 20rpx;
}
.hot-text .hotprod-text {
  height: 76rpx;
  font-size: 28rpx;
  display: -webkit-box;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #000;
}
.prod-items .hot-text .prod-text-info {
  position: relative;
  height: 50rpx;
  line-height: 70rpx;
  font-family: Arial;
}
.prod-items .hot-text .prod-text-info .price {
  color: #eb2444;
}
.price {
  font-family: Arial;
  display: inline-block;
  color: #eb2444;
  padding-bottom: 10rpx;
  padding-left: 10rpx;
}
.symbol {
  font-size: 24rpx;
}
.big-num {
  font-size: 32rpx;
}
.small-num {
  font-size: 24rpx;
}
</style>